<template>
	<el-container style="width: 100%;height: 100%;">
		<el-header>
			<div class="header">
				<ul class="header-left">
					<div style="height: 60px; text-align: center;">
						<img style="height: 50px;width: 90%;" src="../assets/login/logo.png" alt="">
					</div>
					<div  :class="isCollapse ? toggle : toggles" @click="isCollapse = !isCollapse">
						<div>
							<span v-if="isCollapse"><i class="el-icon-s-unfold"></i> </span>
							<span v-else><i class="el-icon-s-fold"></i> 隐藏菜单</span>
						</div>

					</div>
				</ul>
				<div class="header-right">
					<img src="../assets/alarm.png" class="img1">
					<el-popover placement="bottom" trigger="click">
						<img src="../assets/avatar.png" alt="">
						<p>李备</p>
						<p>3421583006</p>
						<button @click="skipRoute"
							style="margin: 0 5px; border: none; background: #3F3363; color: #fff;">个人资料</button>
						<button @click="RealName" style="background: #00AF35;border: none; color: #fff;">实名资料</button>
						<el-button class="img2" slot="reference"><img class="img3" src="../assets/avatar.png" alt="">
						</el-button>
					</el-popover>
				</div>
			</div>
		</el-header>
		<el-container class="nav">
			<el-aside :width="isCollapse ? '64px' : '220px'" style=" overflow: hidden;">
				<div>
					<el-menu router :default-active="$route.path" class="el-menu-vertical-demo" @open="handleOpen"
						@close="handleClose" :unique-opened="true" :collapse="isCollapse">
						<!-- 首页 -->
						<el-menu-item index="/homepage/homepage">
							<i class="el-icon-s-data"></i>
							<span slot="title">首页</span>
						</el-menu-item>
						<!-- 工程信息 -->
						<el-submenu index="/information">
							<template slot="title">
								<i class="el-icon-film"></i>
								<span>工程信息</span>
							</template>
							<el-submenu index="/information/Purchase">
								<template slot="title">
									<span>采购公告</span>
								</template>
								<el-menu-item index="/information/Purchase/gkzb">
									<span slot="title">公开招标</span>
								</el-menu-item>
								<el-menu-item index="/information/Purchase/negotiation">
									<span slot="title">竞争性谈判公告</span>
								</el-menu-item>
								<el-menu-item index="/information/Purchase/consultations">
									<span slot="title">竞争性磋商公告</span>
								</el-menu-item>
								<el-menu-item index="/information/Purchase/invitation">
									<span slot="title">邀请招标公告</span>
								</el-menu-item>
								<el-menu-item index="/information/Purchase/inquiry">
									<span slot="title">询价公告</span>
								</el-menu-item>
								<el-menu-item index="/information/Purchase/source">
									<span slot="title">单一来源公告</span>
								</el-menu-item>
								<el-menu-item index="/information/Purchase/Prequalification">
									<span slot="title">资格预审</span>
								</el-menu-item>
							</el-submenu>
							<el-submenu index="/information/result">
								<template slot="title">
									<span>结果公告</span>
								</template>
								<el-menu-item index="/information/result/bid">
									<span slot="title">中标公告</span>
								</el-menu-item>
								<el-menu-item index="/information/result/deal">
									<span slot="title">成交公告</span>
								</el-menu-item>
							</el-submenu>
						</el-submenu>

						<el-submenu index="/staff">
							<template slot="title">
								<i class="el-icon-user"></i>
								<span>员工管理</span>
							</template>
							<el-menu-item index="/staff/account">
								<span slot="title">员工账号</span>
							</el-menu-item>
							<el-menu-item index="/staff/jurisdiction">
								<span slot="title">员工权限</span>
							</el-menu-item>
						</el-submenu>
						<el-submenu index="/Guarantee">
							<template slot="title">
								<i class="el-icon-notebook-1"></i>
								<span>保函管理</span>
							</template>
							<!-- <el-menu-item index="/Guarantee/apply">
								<span slot="title">申请保函</span>
							</el-menu-item> -->
							<el-menu-item index="/Guarantee/list">
								<span slot="title">保函列表</span>
							</el-menu-item>
							<el-menu-item index="/Guarantee/guarantee">
								<span slot="title">反担保列表</span>
							</el-menu-item>
							<el-menu-item index="/Guarantee/receipt">
								<span slot="title">申请发票</span>
							</el-menu-item>
							<el-menu-item index="/Guarantee/fguarantee">
								<span slot="title">保函发票列表</span>
							</el-menu-item>
						</el-submenu>
						<!-- 财务管理 -->
						<el-submenu index="/finance">
							<template slot="title">
								<i class="el-icon-coin"></i>
								<span>财务管理</span>
							</template>
							<el-menu-item index="/finance/payment">
								<span slot="title">支付记录</span>
							</el-menu-item>
							<!-- <el-menu-item index="/finance/refund">
								<span slot="title">退款记录</span>
							</el-menu-item> -->
							<el-menu-item index="/finance/invoice">
								<span slot="title">发票记录</span>
							</el-menu-item>
						</el-submenu>
						<!-- 资质管理 -->
						<el-submenu index="/qualifications">
							<template slot="title">
								<i class="el-icon-s-promotion"></i>
								<span>经办人</span>
							</template>
							<el-menu-item index="/qualifications/qlist">
								<span slot="title">经办人信息</span>
							</el-menu-item>
							<el-menu-item index="/qualifications/examine">
								<span slot="title">经办人审核</span>
							</el-menu-item>
						</el-submenu>
					</el-menu>
				</div>
			</el-aside>
			<el-main style="background: #f5f6fa;">
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>

</template>

<script>
import { personalrealname } from "@/api/personalrealname";
export default {
	data() {
		return {
			value: [],
			isCollapse: false,
		}
	},

	methods: {

		handleOpen(key, keyPath) {
			console.log('+++++', key, keyPath);
		},
		handleClose(key, keyPath) {
			console.log('-----', key, keyPath);
		},
		skipRoute() {
			this.$router.push('/personal')
		},
		RealName() {
			this.$router.push('/RealName/PersonalRealname')
		}
	}
}
</script>
<style scoped>
.el-submenu__title {
	color: #1795FF !important;
	font-weight: bold;
}

.el-menu-item {
	color: #1795FF !important;
}

.el-menu-item.is-active {
	color: white !important;
	background-color: #1795FF !important;
	border-radius: 2px !important;
}

ul {
	list-style: none;
}



.header {
	position: relative;
	display: flex;
	justify-content: space-around;
	width: 100%;
	height: 60px;
	line-height: 60px;
	margin-bottom: 10px;
	/* min-width: 1200px; */
	/* margin-left: 200px; */
	/* padding-left: 200px; */
	box-sizing: border-box;
}

.header .header-left {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
}


.header .header-right {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
}

.header .header-right .img1 {
	position: absolute;
	right: 60px;
	top: 17px;
	text-align: center;
	width: 25px;
	height: 25px;
}

.header .header-right .img2 {
	position: absolute;
	right: 10px;
	top: 13px;
	width: 30px;
	height: 30px;
	border: none;
}

.header .header-right .img2 .img3 {
	position: absolute;
	left: 10px;
	bottom: -2px;
	width: 30px;
	height: 30px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
	width: 220px;
	min-height: 400px;
}


.nav {
	width: 100%;
	height: 100%;
}
.el-aside {
	overflow-x: hidden;
	/* background-color: #333 !important; */
}
.el-main{
	flex: 1;
	/* padding: 0 10px; */
	/* background-color: red !important; */
}
.toggle {
	position: fixed;
	top: 7px;
	left: 210px;
	text-align: center;
}

.toggles {
	position: fixed;
	top: 7px;
	left: 9%;
	text-align: center;
}

.toggle span {
	margin-left: 25px;
}
</style>
